﻿<!--
 * @Author: 哈兰德
 * @Description: 可拖拽轮播图片列表
-->
<template>
  <div class="image-dragger" style="padding: 10px">
    <draggable class="list-group" :list="imageList" @end="dragEnd">
      <div
        v-for="(item, index) in imageList"
        :key="item._id"
        :label="index + 1"
        class="image-list"
      >
        <div class="dragger-upload">
          <image-upload v-model="item.image" @input="handleSuccess(item)" />
        </div>
        <div class="input-block">
          <el-input
            v-model="item.link"
            placeholder="跳转URL,非必填"
            @change="changeImageLink(item, index)"
          />
          <div class="input-btn">
            <a
              v-if="selectedTemplate.id === 1"
              href="javascript:;"
              @click="configItem(item, index)"
            >热区配置</a>

            <a
              title="清空图片和URL"
              href="javascript:;"
              @click="clearItem(item, index)"
            >清空
            </a>
            <a
              v-if="index > 0"
              title="删除"
              href="javascript:;"
              @click="removeItem(item, index)"
            >删除</a>
          </div>
        </div>
      </div>
    </draggable>
    <div class="flex-row-center">
      <el-button size="mini" @click="addItem">
        添加图片
      </el-button>
    </div>
    <hot-area-config
      ref="hotArea"
      :image-object="uploadItem"
      @callback="callbackAreaConfig"
    />
    <rule-config
      ref="ruleconfig"
      rule-type="content"
      :element-code="'elecode_' + configSelectedItem._id"
      :activity-code="activityCode"
      :component-id="selectedComponent._id"
      :rules="rules"
      @callback="saveRuleConfig"
    />
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import draggable from 'vuedraggable'
import tool from '@/util/tool'
import ImageUpload from '@/components/properties/common/ImageUpload'
import HotAreaConfig from '@/components/properties/common/HotAreaConfig'
import RuleConfig from '@/components/properties/common/RuleConfig'

export default {
  components: {
    draggable,
    ImageUpload,
    HotAreaConfig,
    RuleConfig
  },
  props: {
    activityCode: {
      type: String,
      default: ''
    },
    selectedTemplate: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      imageList: [],
      uploadItem: {},
      configSelectedIndex: 0,
      configSelectedItem: {},
      rules: {}
    }
  },
  computed: {
    ...mapGetters('main', ['selectedComponent'])
  },
  mounted() {
    this.initData()
  },
  methods: {
    ...mapMutations('main', [
      'editComponent',
      'addComponentListItem',
      'editComponentListItem',
      'updateChildListModelField'
    ]),
    initData() {
      const imageList = this.selectedComponent?.imageList || []
      if (imageList.length) {
        this.imageList = tool.deepCopy(imageList)
      } else {
        this.imageList = []
        this.addItem()
      }
    },
    updateComponentData(field, value) {
      const data = {
        _id: this.selectedComponent._id,
        field: field,
        value: tool.deepCopy(value)
      }
      this.editComponent(data)
      this.$emit('addStep')
    },
    handleSuccess() {
      this.updateComponentData('imageList', this.imageList)
    },
    dragEnd () {
      let tempList = this.imageList
      this.updateComponentData('imageList', [])
      setTimeout(() => {
        this.updateComponentData('imageList', tempList)
      }, 200)
    },
    changeImageLink () {
      this.updateComponentData('imageList', this.imageList)
    },
    configItem (item) {
      if (!item.image) {
        this.$message.error('请先上传图片!')
        return
      }
      this.uploadItem = item
      this.$refs.hotArea.openDialog()
    },
    clearItem (item) {
      item.image = ''
      item.link = ''
      item.hotAreaList = []
      item.ruleTag = false
      this.updateComponentData('imageList', this.imageList)
    },
    removeItem (item, index) {
      this.imageList.splice(index, 1)
      this.updateComponentData('imageList', this.imageList)
    },
    addItem () {
      let length = this.imageList.length
      if (length >= 10) {
        this.$message.error('最多10张图片，不能再增加了！')
        return
      }
      let item = {
        image: '',
        link: '',
        _id: tool.guid(),
        hotAreaList: [],
        uploadTag: false,
      }
      this.imageList.push({ ...item })
      this.addComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: item,
      })
      this.$emit('addStep')
    },
    openRuleConfig (item, index) {
      this.configSelectedItem = item
      this.configSelectedIndex = index
      this.$refs.ruleconfig.openDialog()
    },
    callbackAreaConfig (areaList) {
      const item = this.imageList.find(per => per._id === this.uploadItem._id)
      item.hotAreaList = areaList
      this.updateChildListModelField({
        _id: this.selectedComponent._id,
        field: 'imageList',
        childId: this.uploadItem._id,
        childField: 'hotAreaList',
        value: areaList,
      })
      this.$emit('addStep')
    },
    saveRuleConfig (data) {
      // 保存规则后的回调，修改组件的上下架时间和规则状态
      let tag = false
      if (data.onlineTime || data.ruleList.length > 0) {
        tag = true
      }
      const item = this.imageList.find(per => per._id === this.configSelectedItem._id)
      item.ruleTag = tag
      // 注意这里是更新该组件的list规则标记
      this.editComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: { ... this.configSelectedItem, ruleTag: tag },
        index: this.configSelectedIndex,
      })

      const hasTrue = this.selectedComponent.imageList.find(image => image.ruleTag)
      this.editComponent({
        _id: this.selectedComponent._id,
        field: 'childRuleTag',
        value: !!hasTrue
      })
    }
  }
}
</script>

<style lang="less" scoped>
.image-dragger {
  .image-list {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
  .dragger-upload {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
  }
  .input-block {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    .el-input {
      width: 220px;
      margin-top: 5px
    }
    .input-btn {
      padding-top: 5px;
      a {
        color: #549be7;
        margin-right: 12px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .rule-config-cls {
    color: #549be7;
  }
  .flex-row-center {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
  }
}
</style>